<template>
	<view>
		<scroll-view scroll-x="true" class="scroll-view_H charts-tabbar">
			<block v-for="(item, index) in tab">
				<view class="item" :class="{ active: index == curr }" @click="tabChange(index)">{{ item }}</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'scroll-bar2',
	props: {
		tab: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			curr: 0
		};
	},
	methods: {
		tabChange(index) {
			if (index == this.curr) return;

			this.curr = index;
			this.$emit('change', index);
		}
	}
};
</script>

<style lang="scss">
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.charts-tabbar {
	padding: 25upx 0;

	.item {
		display: inline-block;
		margin-right: 20upx;
		min-width: 106upx;
		padding: 20rpx 34rpx;
		text-align: center;
		box-sizing: border-box;
		border: 1rpx solid #d5d5d5;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		border-radius: 6rpx;
		&.active {
			color: #fff;
			background: #00a0e9;
			border: 0;
		}
	}
}
</style>
